<template>
    <div>
        son1
        {{money}}
        <!-- 方式1 -->
        <!-- <button @click="changemoney(500)">更改</button> -->

        <!-- 方式2 绑一个点击事件和真实函数去触发父级自定义事件-->
        <button @click="change">点击1</button>

        <!-- 方式3 -->
        {{value}}
        <button @click="change1">点击2</button>

        <!-- {{mnyZdy}} 和方式3一样，只是通过model对象改名字 -->
        <!-- 这里的changeZdy和model里event:'changeZdy'对应 -->
        <!-- <button @click="$emit('changeZdy',500)">点击3</button> -->

        <!-- {{money}} .sync语法糖
        <button @click="$emit('update:money',300)">点击4</button> -->
    </div>
</template>
<script>
//把money属性添加给了子组件
//子组件不能更改父组件中的数据，因为属性不是响应式
//子组件可以调用父组件中定义的函数，将需要修改的值传递给父组件，单项数据源
export default {
    name:'son1',
    //会影响父级v-model传值
    model:{
        prop:'mnyZdy', //默认是value属性，这里改的属性名要在props里有
        event:'changeZdy' //默认事件名叫input
    },
    // props:['money'] 和 props:{money:{}} 一样，都是不校验
    props:{
        mny:{type:Number},
        mnyZdy:{type:Number},//这里对应model里改的名字
        money:{
            type:Number,
            default:0
        },
        changemoney:{//把函数当做属性传进来
            type:Function,
            dafault:()=>{}
        },
        value:{
            type:Number,
            default:10
        }
    },
    methods:{
        //在子的函数中触发zdy
        change(){
            console.log(123)
            this.$emit('zdy',500)
        },
        change1(){
            this.$emit('input',200)//v-model要触发input事件
        }
    }
}
</script>
